<template>
    <div class="i-u-box">
        <div class="base bg-white">
            <div class="w-full m-16">
                <div class="info-box">
                    <p class="text-3xl flex items-center justify-center">个人信息</p>
                    <n-tabs default-value="simpleSetting" justify-content="space-evenly" type="line">
                        <n-tab-pane name="simpleSetting" tab="基本设置">
                            <div class="flex w-full">
                                <div class="left-box">
                                    <div class="flex mt-4">
                                        <span class="text-base w-12 mr-2 flex items-center">昵称:</span>
                                        <n-input v-model:value="nicknameValue" type="text"
                                                 placeholder="请输入昵称"></n-input>
                                    </div>
                                    <div class="flex mt-4">
                                        <span class="text-base w-12 mr-2 flex items-center">介绍:</span>
                                        <n-input v-model:value="describeValue" type="textarea" maxlength="300"
                                                 placeholder="想些什么写什么" show-count clearable/>
                                    </div>
                                    <div class="flex mt-4">
                                        <span class="text-base w-12 mr-2 flex items-center">性别:</span>
                                        <div class="w-24">
                                            <n-select v-model:value="genderName" :options="sexArray" :on-update:value="onSelectSexUpdate"/>
                                        </div>
                                    </div>
                                    <div class="flex mt-4">
                                        <span class="text-base w-20 mr-2 flex items-center">出生日期:</span>
                                        <n-date-picker v-model:value="birthDay" type="date" clearable/>
                                    </div>
                                    <div class="flex mt-4">
                                        <span class="text-base w-20 mr-2 flex items-center">出生日期:</span>
                                        <div class="w-2/3 flex">
                                            <n-select
                                                placeholder="选择省份"
                                                :options="provinceList"
                                                :value="currentProvinceName"
                                                @update:value="handleProvinceValue"
                                            />
                                            <n-select
                                                placeholder="选择城市"
                                                :options="cityList"
                                                :value="currentCityName"
                                                @update:value="handleCityValue"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div class="right-box">
                                    <van-uploader v-model="fileList" multiple :max-count="1"/>
                                </div>
                            </div>
    
                            <div class="flex items-center justify-center my-4">
                                <n-button class="w-36" @click="updateInfoFun">
                                    保存
                                </n-button>
                            </div>
                        </n-tab-pane>
                    </n-tabs>
    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NTabs, NTabPane, NInput, NDatePicker, NSelect, NButton} from 'naive-ui';
import {onMounted, reactive, toRefs} from "vue";
import {areaList} from '@vant/area-data';
import {calInteger} from "@/util/cal";

import '@vant/touch-emulator';
import {useStore} from "vuex";
import {getUserDetail, updateUserInfo} from "@/network/user";

export default {
    name: "InfoUpdate",
    setup() {
        const TAG = "InfoUpdate.vue";
        const store = useStore();
        const updateInfo = reactive({
            nicknameValue: '',
            describeValue: '',
            gender: '1',
            genderName: '男',
            birthDay: 28800000,
            provinceList: [],
            currentProvince: 110000,
            currentProvinceName: '北京',
            cityList: [],
            currentCity: 110001,
            currentCityName: "北京市",
            fileList: [],
        })
        
        const sexArray = [
            {
                value: "男",
                label: "男"
            },
            {
                value: '女',
                label: '女'
            },
            {
                value: '保密',
                label: '保密'
            },
        ].map((s) => {
            s.value = s.value.toLowerCase()
            return s
        })
        
        // 将省地区列表格式化为选择框选项
        const formatProvinceListToOption = () => {
            
            let pl = areaList.province_list;
            
            for (let item in pl) {
                let tmp = {};
                tmp.label = pl[item];
                tmp.value = item;
                updateInfo.provinceList.push(tmp);
            }
        }
        
        // 通过省份数据生成城市选择框选项
        const formatCityListToOptionByProvince = () => {
            
            let cl = areaList.city_list;
            
            for (let item in cl) {
                if ((calInteger(item / 10000) - 1) === calInteger(updateInfo.currentProvince / 10000)) {
                    let tmp = {};
                    tmp.label = cl[item];
                    tmp.value = item;
                    updateInfo.cityList.push(tmp);
                }
            }
        }
        
        // 选择省份触发事件
        const handleProvinceValue = (value) => {
            updateInfo.currentProvince = value;
            updateInfo.cityList = [];
            updateInfo.currentProvinceName = areaList.province_list[updateInfo.currentProvince];
            updateInfo.currentCityName = '';
            formatCityListToOptionByProvince();
        }
        
        // 选择城市触发事件
        const handleCityValue = (value) => {
            updateInfo.currentCity = value;
            updateInfo.currentCityName = areaList.city_list[updateInfo.currentCity];
        }
        
        const init = () => {
            getUserDetail(store.state.user.uid).then(res => {
                console.log(res);
                updateInfo.nicknameValue = res.data.profile.nickname;
                updateInfo.describeValue = res.data.profile.signature;
                updateInfo.gender = res.data.profile.gender;
                updateInfo.birthDay = res.data.profile.birthday;
                updateInfo.currentCity = res.data.profile.city;
                updateInfo.currentProvince = res.data.profile.province;
                updateInfo.currentProvinceName = areaList.province_list[updateInfo.currentProvince];
                updateInfo.currentCityName = areaList.city_list[updateInfo.currentCity];
                updateInfo.fileList = [{url: `${res.data.profile.avatarUrl}`, isImage: true} ];
            })
        }
        
        // radio按钮变化事件
        const onRadioGroup = (value) => {
            console.log(value);
        }
        
        // 性别框变化回调函数
        const onSelectSexUpdate = (value) => {
            updateInfo.genderName = value;
            if (value === '男') {
                updateInfo.gender = 1;
            } else if (value === '女') {
                updateInfo.gender = 2;
            } else {
                updateInfo.gender = 0;
            }
        }
        // 更新信息按钮
        const updateInfoFun = () => {
            updateUserInfo(updateInfo.gender, updateInfo.describeValue, updateInfo.currentCity, updateInfo.nicknameValue, updateInfo.birthDay, updateInfo.currentProvince).then(res => {
                console.log(res);
            })
        }
        
        onMounted(() => {
            init();
            formatProvinceListToOption();
        })
        
        return {
            ...toRefs(updateInfo),
            sexArray,
            areaList,
            handleProvinceValue,
            handleCityValue,
            onRadioGroup,
            onSelectSexUpdate,
            updateInfoFun
        }
    },
    components: {
        NTabs,
        NTabPane,
        NInput,
        NDatePicker,
        NSelect,
        NButton
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.i-u-box {
    width: $client-width;
    background: #f4f4f4;
    .info-box {
    
        min-height: $client-height;
    }
    .left-box {
        @apply w-1/2;
        
    }
    
    .right-box {
        @apply flex items-center justify-center w-1/2 m-16 bg-gray-100 h-32;
    }
}
</style>